<template>
  <div class="pagestyle">
    <topbottomCom :optionsquery="1">
      <template v-slot:dragTopSlot>
        <list_controller :showCaozuo="state.showCaozuo" @query="query" ref="zujianname" :options="state.options"
          @cellClickEvent="cellClickEvent">
          <template v-slot:opraCurdBtnAll>
            <span :class="state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(1)">
              <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon" icon-class="qiehuan" />
              实时逻辑报警
            </span>
          </template>
          <template v-slot:selectNamelist> 历史逻辑报警 </template>
        </list_controller>
      </template>
      <template v-slot:dragBottomSlot>
        <list_controller ref="zujiannametwo" :descQuery="state.descObj" :options="state.optionstwo"
          @pagechange="pagechange">
          <template v-slot:opraCurdBtnlist="row">
            <span>
              <el-button class="tableFontSize" type="primary" link size="small" @click="lookBtn(row.row.row)">填写分析
              </el-button>
              <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)"
                v-if="row.row.row.templateDto != null">查看分析
              </el-button>
            </span>
          </template>
          <template v-slot:selectNamelist> 详细信息(总计) </template>
        </list_controller>
      </template>
    </topbottomCom>
    <!-- 填写分析 -->
    <fillayaCom :fillayaComShow="state.fillayaComShow" @submitFormfillayaCom="submitFormfillayaCom" :status="'D'">
    </fillayaCom>
    <!-- 查看曲线 -->
    <chartCom :openChart="state.showChart" :data="state.chartData" @closeChart="closeChart">
    </chartCom>
    <!-- 查看分析 -->
    <ayadetailCom :detailsList="state.detailsList" :detailsShow="state.detailsShow"></ayadetailCom>
  </div>
</template>
<script setup>
import topbottomCom from "./listCom/topbottomCom.vue";
import list_controller from "@/components/commonCom/list_controller";
import fillayaCom from "./listCom/fillayaCom.vue";
import ayadetailCom from "./listCom/ayadetailCom.vue";
import chartCom from "./listCom/chartCom.vue";
import {
  computed,
  onMounted,
  reactive
} from "vue";
import {
  table_headers
} from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import dayjs from "dayjs";
import {
  searchareaTree
} from "@/api/config";
const {
  proxy
} = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let state = reactive({
  detailsShow: false,
  detailsList: [],
  tempList: [],
  fillayaComShow: false, //控制填写分析抽屉显示
  listBtnType: undefined,
  options: {
    tableheads: computed(() => table_headers.hisAlarmLogicStatics),
    queryList: {
      querys: [{
        fieldsearch: "conditionType",
        field: "conditionType",
        title: "查询方式",
        type: "radiospecial",
        binddata: 1,
        options: [{
          label: "时间查询",
          value: 1,
        },
        {
          label: "班次查询",
          value: 2,
        },
        ],
      },
      {
        field: ["startTime", "endTime"],
        fieldsearch: ["startTime", "endTime"],
        title: "时间范围",
        col: 12,
        type: "datetimestartEnd",
        binddata: [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
          'YYYY-MM-DD HH:mm:ss')],
        typespecial: 2,
        show: false,
      },
      {
        field: "datetime",
        fieldsearch: "datetime",
        title: "日期",
        type: "datetime",
        binddata: dayjs().format('YYYY-MM-DD'),
        typespecial: 1,
        show: true,
      },
      {
        fieldsearch: "banci",
        field: "banci",
        title: "班次选择",
        type: "selectspecial",
        binddata: "",
        options: [],
        typespecial: 1,
        show: true,
      },
      {
        field: "logicAlarmName",
        title: "逻辑报警名称",
        type: "select",
        binddata: "",
        options: [],
      }
      ],
    },
    dataUrl: "/hisAlarmLogic/attainStatics",
  },
  optionstwo: {
    queryList: {
      detailListSear: true,
      autoSearch: true,
      querys: [],
    },
    tableheads: computed(() => table_headers.hisAlarmLogicDetail),
    dataUrl: "/hisAlarmLogic/attainDetail",
  },
  editId: undefined,
  banciList: [],
  showCaozuo: true,
  data: {},
  areaObj: {
  },
  descObj: {},
  showChart: false,
  chartData: {},
});
// 填写分析抽屉
function lookBtn(row) {
  state.editId = row.id;
  state.fillayaComShow = dayjs().unix();
}
// 提交填写分析
function submitFormfillayaCom(data) {
  let dataObj = {};
  dataObj.id = state.editId;
  dataObj.templateDto = data;
  if (data) {
    axios.post("/hisAlarmLogic/modifyAnalysis", dataObj).then((res) => {
      proxy.$modal.msgSuccess(res.msg);
      state.fillayaComShow = false;
      proxy.$refs.zujiannametwo.getData({
        ...state.descObj
      });
    });
  } else {
    state.fillayaComShow = false;
  }
}

function listInfoBtnClick(type) {
  state.listBtnType = type;
  if (type == 1) {
    goPage()
  }
}
// 编辑按钮
function editBtn(row) {
  if (row.templateDto != null) {
    state.detailsShow = dayjs().unix();
  }
  state.detailsList = row.templateDto;
}

function cellClickEvent(row) {
  store.records = []
  state.data = row
  state.descObj.logicAlarmName = row.logicAlarmName
  proxy.$refs.zujiannametwo.getData({
    ...state.descObj
  });
}

function pagechange() {
  proxy.$refs.zujiannametwo.getData({
    ...state.descObj
  });
}

function query(type) {
  if (type == 2) {
    proxy.$refs.zujiannametwo.state.tabledata = []
    getconditionList({
    })
  }
  if (type.type == 4) {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "condition") {
        state.areaObj['condition'] = type.val
        item.binddata = type.val
      }
    });
    getconditionList(state.areaObj);
  }
  if (type.type == 44) {
    state.options.queryList.querys.forEach((item) => {
      if (item.type == 'cascaderRadioSpecial') {
        if (item.binddata == '' || !item.binddata) {
          state.areaObj['areaName'] = type.val1
          getconditionList(state.areaObj);
        }
      }
    })
  }
  if (type.type == 5) {
    let dataObj = {
      dateSuffix: undefined,
      classInfo: {},
    };
    state.options.queryList.querys.forEach((item) => {
      if (type.val1) {
        dataObj.dateSuffix = type.val1
        if (item.fieldsearch == "banci" && type.item.type != 'datetimestartEnd') {
          state.banciList.forEach((itemsub) => {
            if (itemsub.id == item.binddata) {
              dataObj.classInfo = itemsub;
              dataObj.typeLabel = 2
              banciList(dataObj);
            }
          });
        }
      } else {
        if (item.fieldsearch == "datetime") {
          dataObj.dateSuffix = item.binddata;
        }
      }
      if (item.fieldsearch == "banci") {
        state.banciList.forEach((itemsub) => {
          if (type.val == 0) {
            type.val = state.banciList[0].id
          }
          if (itemsub.id == type.val) {
            dataObj.classInfo = itemsub;
            dataObj.typeLabel = 2
            banciList(dataObj);
          }
        });
      }
    });
  }
  if (type.type == 'topConnectBom') {
    state.descObj = type.data
    proxy.$refs.zujiannametwo.state.tabledata = []
  }
}

function getbanciList() {
  axios.post("/class/info/searchAll", {}).then((res) => {
    state.banciList = res.data.list;
    state.options.queryList.querys.forEach((item) => {
      if (item.fieldsearch == "banci") {
        item.options = res.data.list.map((item) => {
          return {
            label: item.className,
            value: item.id,
          };
        });
        item.binddata = item.options[0].value
      }
    });
  });
}
getbanciList();

function banciList(dataObj) {
  axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (dataObj.typeLabel != 2 || state.options.queryList.querys[0].binddata == 2) {
        if (item.type == "datetimestartEnd") {
          item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
        }
      }
    });
  });
}

function getSelList() {
  axios.post("/hisPointFeed/listAllNames", {
    flag: false
  }).then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "condition") {
        item.options = res.data;
      }
    });
  });
  searchareaTree().then((res) => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "area") {
        item.options = res.data;
      }
    });
  });
  axios.post('logic/alarm/list', {}).then(res => {
    state.options.queryList.querys.forEach((item) => {
      if (item.field == "logicAlarmName") {
        item.options = res.data.list.map(item => {
          return {
            label: item.logicAlarmName,
            value: item.logicAlarmName
          }
        })
      }
    });
  })
}

function getconditionList(dataObj) {
  axios
    .post("/hisPointFeed/conditionList", dataObj)
    .then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.type == "cascaderRadioSpecial") {
          item.options = res.data;
        }
      });
    });
}
getconditionList(state.areaObj)
getSelList();
// 跳转实时馈电异常页面
const goPage = () => {
  router.push({
    name: 'Lb_realLJBJList'
  })
}
// 关闭曲线
const closeChart = () => {
  state.listBtnType = undefined
  state.showChart = false
}

onMounted(() => {

});
</script>
<style lang="scss" scoped>
.xiazai {
  position: absolute;
  top: 42px;
  right: 110px;
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  background-color: #ffff;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  z-index: 99;

  .item {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .item:hover {
    background-color: #ececec;
  }
}

::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>